<template>
  <div class="register_container">
    <div class="text_2">河湖空间大数据平台用户注册</div>
    <div class="register_box">
      <!--注册表单区域-->
    <el-form ref="resetForm" class="register_form" formData :model="formData" :rules="rules" label-width="0px" @keyup.enter.native="register()">
      <!--用户名-->
      <el-form-item prop="username">
        <el-input v-model="formData.username" placeholder="请输入用户名" prefix-icon="el-icon-user-solid" clearable>
        </el-input>
      </el-form-item>
      <!--ID number-->
      <el-form-item prop="idNumber">
        <el-input v-model="formData.idNumber" placeholder="请输入身份证号码" prefix-icon="el-icon-postcard" clearable>
        </el-input>
      </el-form-item>
      <!--手机号输入-->
      <el-form-item prop="phoneNumber">
        <el-input v-model="formData.phoneNumber" placeholder="请输入手机号码" prefix-icon="el-icon-phone" clearable>
        </el-input>
      </el-form-item>
      <!--密码设置-->
      <el-form-item prop="password">
        <el-input v-model="formData.password" placeholder="请输入密码" type="password" prefix-icon="el-icon-lock" clearable>
        </el-input>
      </el-form-item>
      <!--确认密码-->
      <el-form-item prop="checkPassword">
        <el-input v-model="formData.checkPassword" placeholder="再次输入密码" type="password" prefix-icon="el-icon-lock" clearable>
        </el-input>
      </el-form-item>
      <!--注册机构-->
      <el-form-item class="institutionName">
        <el-select v-model="formData.institutionName" placeholder="请选择" style="width: 460px">
          <el-option
            v-for="item in institutionOpt"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <!--按钮区域-->
          <router-link to="login" class="active_1">已有账户？点击登录</router-link>
      <!-- <router-link to="institution_register" class="active_2">机构注册</router-link> -->
      <el-form-item class="btns">
        <el-button type="primary" @click="register('formData')" icon="el-icon-s-promotion">注册</el-button>
        <el-button @click="resetForm('formData')" icon="el-icon-refresh-right">重置</el-button>
      </el-form-item>
  
    </el-form>
    </div>
  </div>
</template>


<script>
  import {register} from  "../Api/api"
  export default {
    data() {
      //中国身份证验证，输入是否合理
      var validateidNumber = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('身份证号码不能为空'))
        }
        let city = {
          11: '北京',
          12: '天津',
          13: '河北',
          14: '山西',
          15: '内蒙古',
          21: '辽宁',
          22: '吉林',
          23: '黑龙江 ',
          31: '上海',
          32: '江苏',
          33: '浙江',
          34: '安徽',
          35: '福建',
          36: '江西',
          37: '山东',
          41: '河南',
          42: '湖北 ',
          43: '湖南',
          44: '广东',
          45: '广西',
          46: '海南',
          50: '重庆',
          51: '四川',
          52: '贵州',
          53: '云南',
          54: '西藏 ',
          61: '陕西',
          62: '甘肃',
          63: '青海',
          64: '宁夏',
          65: '新疆',
          71: '台湾',
          81: '香港',
          82: '澳门',
          91: '国外'
        };
        if (!value || !/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i.test(value)) {
          callback(new Error('身份证号格式错误'))
        } else if (!city[value.substr(0, 2)]) {
          callback(new Error('身份证号格式错误'))
        } else {
          // 18位身份证需要验证最后一位校验位
          if (value.length === 18) {
            const code = value.split('');
            // ∑(ai×Wi)(mod 11)
            // 加权因子
            const factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
            // 校验位
            const parity = [1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2];
            let sum = 0;
            let ai = 0;
            let wi = 0;
            for (let i = 0; i < 17; i++) {
              ai = code[i];
              wi = factor[i];
              sum += ai * wi
            }
            if (parity[sum % 11].toString() !== code[17]) {
              callback(new Error())
            }
          }
        }
        callback()
      };
      //手机号码验证
      var phoneReg = /^1(3|4|5|7|8)\d{9}$/;
      var validatephoneNumber = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('联系方式不能为空！'))
        }
        setTimeout(() => {
          if (!phoneReg.test(value)) {
            callback(new Error('联系方式格式有误！'));
          } else {
            callback();
          }
        }, 500)
      };
      //验证第二次输入密码是否合理
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.formData.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        formData: {
          username: '',
          idNumber:'',
          phoneNumber:'',
          password: '',
          checkPassword:'',
          institutionName:'',
          institutionId:''
        },
        rules: {
          username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
          // idNumber: [{ required: true, validator: validateidNumber, trigger: 'blur' }],
          phoneNumber:[{ required: true, validator:validatephoneNumber, trigger: 'blur' }],
          password: [{ required: true, message: '密码不能为空', trigger: 'blur' },
                     {min:3,max:12,message:"长度在3到12个字符",trigger: 'blur'}],
          checkPassword: [{ required: true, validator: validatePass, trigger: 'blur' }],
          institutionName: [{ required: true, message: '请选择注册机构', trigger: 'blur' }]
        },
        //机构名称
        institutionName: '',
        institutionOpt:[
          {
            value: '水科院',
            label: '水科院'
          }, {
            value: '水务局',
            label: '水务局'
          }
        ],
      };
    },
    methods: {
      register(){
          let that = this;
          register(that.formData).then(function (res) {
            console.log(res.data.code);
            if (res.data.code === 0) {
              that.$router.push({path: "/"});
              that.register = false;
              that.login = true;
              alert("注册成功！")
            } else if (res.data.code === 1) {
              alert('该身份已被注册！请勿重复注册')
            }else{
              alert('注册失败！')
            }
          })
        },

      resetForm() {
        this.$refs.resetForm.resetFields();
      }
    }
  };
</script>

<style scoped>

  .register_container{
  background-image: url("../assets/images/timg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  }

  .text_2{
    color: #f1ffdf;
    font-size: 24px;
    text-align: center;
    padding-top: 30px;
   
  }


  .register_box{
    width: 500px;
    height: 500px;
    background-color: #fff;
    border-radius: 15px;
    opacity: 0.9;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
  }

  .btns{
    display: flex;
    justify-content: center;

  }

  .register_form{
    position: absolute;
    bottom: 20px;
    top: 30px;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .institutionName{
    width:460px;
  }

  .active_1{
    text-decoration: none;
   font-size: 15px;
  color: #7a7070;
text-align:center;
display: block;
margin-bottom: 20px;
   
  }
  .active_2{
    text-decoration: none;
    position: absolute;
    right: 25%;
    color: #2e9afa;
  }

  .institutionName{
    width: 200px;
  }

</style>
